<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="../css/common.css" rel="stylesheet">
<link href="../css/index.css" rel="stylesheet">
<link href="../css/baojing.css" rel="stylesheet">
<script src="../js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="../css/content.css" />
<script src="../laydate/laydate.js"></script>

<title>首页</title>

</head>

<body>

<div class="fanhuiguanli">
        	<p><a href="#">资产管理&nbsp;</a></p><p>&gt;&nbsp;</p><p><a href="#">仓库管理&nbsp;</a></p><p>&gt;&nbsp;</p><p><a href="#">车机匹配&nbsp;</a></p>
        </div>
        <div class="chaxunguanli">
            <li><p>开始时间：</p><input type="text" class="inline"  onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" id="start"></li>
            <li><p>结束时间：</p><input type="text" class="inline"  onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" id="end"></li>
            <li><p>车辆选择：</p><select><option>车辆选择</option><option>车辆选择</option></select>
            </li>
            <li><input type="button" value="查询" style=" background:#22abd4; color:#ffffff; text-align:center; padding:0;" class="showdiv"></li>  
        </div>
        <div class="wuge">
            <input type="button" value="新增" class="xinzeng">
            <input type="button" value="修改" class="xiugai">
            <input type="button" value="删除">
        </div>
        <div style="clear:both;"></div>
        <div class="nkbiaoth">
            <li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk" id="hao">
            </li>
            <li style="width:10%"><span>故障名称</span></li>
            <li style="width:15%"><span>故障码</span></li>
            <li style="width:15%"><span>触发规则</span></li>
            <li style="width:11%"><span>报警等级</span></li>
            <li style="width:15%"><span>车型</span></li>
            <li style="width:10%"><span>创建人</span></li>
            <li style="width:20%"><span>创建时间</span></li>
        </div>
        <!--内容行-->
        <div class="lie">
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:10%"><span>SOC欠压</span></li>
            <li style="width:15%"><span>332 </span></li>
            <li style="width:15%"><span>	SOC<10% </span></li>
            <li style="width:11%"><span>三级</span></li>
            <li style="width:15%"><span>BEVFCV</span></li>
            <li style="width:10%"><span>test</span></li>
            <li style="width:20%"><span>2016-10-23-23:13:42 </span></li>
        </ul> 
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:10%"><span>SOC欠压</span></li>
            <li style="width:15%"><span>332 </span></li>
            <li style="width:15%"><span>	SOC<10% </span></li>
            <li style="width:11%"><span>三级</span></li>
            <li style="width:15%"><span>BEVFCV</span></li>
            <li style="width:10%"><span>test</span></li>
            <li style="width:20%"><span>2016-10-23-23:13:42 </span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:10%"><span>SOC欠压</span></li>
            <li style="width:15%"><span>332 </span></li>
            <li style="width:15%"><span>	SOC<10% </span></li>
            <li style="width:11%"><span>三级</span></li>
            <li style="width:15%"><span>BEVFCV</span></li>
            <li style="width:10%"><span>test</span></li>
            <li style="width:20%"><span>2016-10-23-23:13:42 </span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:10%"><span>SOC欠压</span></li>
            <li style="width:15%"><span>332 </span></li>
            <li style="width:15%"><span>	SOC<10% </span></li>
            <li style="width:11%"><span>三级</span></li>
            <li style="width:15%"><span>BEVFCV</span></li>
            <li style="width:10%"><span>test</span></li>
            <li style="width:20%"><span>2016-10-23-23:13:42 </span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:10%"><span>SOC欠压</span></li>
            <li style="width:15%"><span>332 </span></li>
            <li style="width:15%"><span>	SOC<10% </span></li>
            <li style="width:11%"><span>三级</span></li>
            <li style="width:15%"><span>BEVFCV</span></li>
            <li style="width:10%"><span>test</span></li>
            <li style="width:20%"><span>2016-10-23-23:13:42 </span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:10%"><span>SOC欠压</span></li>
            <li style="width:15%"><span>332 </span></li>
            <li style="width:15%"><span>	SOC<10% </span></li>
            <li style="width:11%"><span>三级</span></li>
            <li style="width:15%"><span>BEVFCV</span></li>
            <li style="width:10%"><span>test</span></li>
            <li style="width:20%"><span>2016-10-23-23:13:42 </span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:10%"><span>SOC欠压</span></li>
            <li style="width:15%"><span>332 </span></li>
            <li style="width:15%"><span>	SOC<10% </span></li>
            <li style="width:11%"><span>三级</span></li>
            <li style="width:15%"><span>BEVFCV</span></li>
            <li style="width:10%"><span>test</span></li>
            <li style="width:20%"><span>2016-10-23-23:13:42 </span></li>
        </ul>

        </div>
        <script>
$("li>input").click(function(){
	if($(this).siblings().children().attr("src")=="../images/xuanzhong.png"){
		$(this).siblings().children().attr("src","../images/weixuanzhong.png")
		}
		else
		{
		$(this).siblings().children().attr("src","../images/xuanzhong.png")
		};
	});
$(function(){
	$('#sundashen').click(function(){
	var ss=$('#sundashen').parents('.jdxk1').siblings().find(":checkbox");
	var tt=$('#sundashen').parents('.jdxk1').siblings().find(".wenjing");
	for(var i=0; i<ss.length; i++){
		if($(this).attr('checked')){
			ss[i].checked=true;
			tt[i].src="../images/xuanzhong.png";
			}else{
				ss[i].checked=false;
				tt[i].src="../images/weixuanzhong.png";
				}
	
		}
	});
	$('#hao').click(function(){
		var k = $('#hao').parents('.nkbiaoth').siblings().find(':checkbox');
		var j = $('#hao').parents('.nkbiaoth').siblings().find('.xiaosun');
		for(var i=0; i<k.length; i++){
			if($(this).attr('checked')){
				k[i].checked=true;
				j[i].src="../images/xuanzhong.png";
				}else{
					k[i].checked=false;
					j[i].src="../images/weixuanzhong.png";
					}
			}
	});
	
})

</script>
<!--分页-->
<div style="background:#06212e;">
<div class="fenye">
	
	<a href="#"><img src="../images/dingdanglxz.png"></a>
    <a href="#"><img src="../images/dingdanglxyl.png"></a>
    <a href="#"><input type="text" value="1"><span>/18</span></a>
    <a href="#"><img src="../images/dingdanglxzr.png"></a>
    <a href="#"><img src="../images/dingdanglxy.png"></a>
    <span>共<strong>4</strong>条</span>
</div>
</div>
<!--查询弹框开始-->
	<div class="showbox" id="chaxun">
		<div class="shang"><p>17位车架号<span>（所属单位：奇瑞汽车股份有限公司）</span></p><a class="close"><img src="../images/cha.png"></a></div>
		<div class="mainlist">
			<ul>
            	<li>车辆状态：启动</li>
                <li>模式：纯电</li>
                <li>注册时间：2016年10月26日</li>
            </ul>
            <ul>
            	<li>定位状态：有效</li>
                <li>方向：西南</li>
                <li>数据时间：2016年10月27日</li>
            </ul>
            <ul>
            	<li style="margin-right:25px;">GPS 车速：20KM/h</li>
                <li>位置：江苏省常州市钟楼区玉龙路星港路附近</li>
            </ul>
            <ul>
            	<li style="margin-right:10px;"><a href="jingtaixinxi.html">静态信息</a></li>
                <li style="margin-right:10px;"><a href="chelianggenzhong.html">车辆跟踪</a></li>
                <li style="margin-right:10px;"><a href="guijihuifang.html">轨迹回放</a></li>
                <li style="margin-right:10px;"><a href="shujuxiangqing.html">数据详情</a></li>
            </ul>
		</div>
	</div>	
  
<script type="text/javascript">
$(document).ready(function(){
	$(".showdiv").click(function(){
		var box =300;
		var th= $(window).scrollTop()+$(window).height()/1.6-box;
		var h =document.body.clientHeight;
		var rw =$(window).width()/2-box;
		$("#chaxun").animate({top:th,opacity:'show',width:585,height:280,right:rw},500);
		$("#zhezhao").css({
			display:"block",height:$(document).height()
		});
		return false;
	});
	$("#chaxun .close").click(function(){
		$(this).parents("#chaxun").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);
		$("#zhezhao").css("display","none");
	});
});
</script>
<!--查询弹框结束-->
<!--增加弹框开始-->
	<div class="showbox" id="showbox">
		<div class="shang"><p>增加</p><a class="close"><img src="../images/cha.png"></a></div>
        <div class="zengjianeir">
        	<li><p>故障名称：</p><input type="text"></li>
            <li><p>车型：</p><select><option>车型</option>
            	<option>车型</option></select>
			</li>
            <li><p>触发规则：</p><input type="text"></li>
            <li><p>报警等级：</p><select><option>一级</option>
            	<option>二级</option></select>
			</li>
            <div style="margin:0 auto; text-align:center"><input type="button" value="保存" class="baocun"><input type="button" value="取消" class="quxiao"></div>
        </div>
		
	</div>	
<script type="text/javascript">
$(document).ready(function(){
	$(".xinzeng").click(function(){
		var box =300;
		var th= $(window).scrollTop()+$(window).height()/1.6-box;
		var h =document.body.clientHeight;
		var rw =$(window).width()/2-box;
		$("#showbox").animate({top:th,opacity:'show',width:585,height:350,right:rw},500);
		$("#zhezhao").css({
			display:"block",height:$(document).height()
		});
		return false;
	});
	$("#showbox .close").click(function(){
		$(this).parents("#showbox").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);
		$("#zhezhao").css("display","none");
	});
});
</script>
<!--增加框结束-->

<!--修改弹框开始-->
	<div class="showbox" id="showboxxiugai">
		<div class="shang"><p>修改</p><a class="close"><img src="../images/cha.png"></a></div>
        <div class="zengjianeir">
        	<li><p>故障名称：</p><input type="text"></li>
            <li><p>车型：</p><select><option>车型</option>
            	<option>车型</option></select>
			</li>
            <li><p>触发规则：</p><input type="text"></li>
            <li><p>报警等级：</p><select><option>一级</option>
            	<option>二级</option></select>
			</li>
            <div style="margin:0 auto; text-align:center"><input type="button" value="保存" class="baocun"><input type="button" value="取消" class="quxiao"></div>
        </div>
		
	</div>	
<script type="text/javascript">
$(document).ready(function(){
	$(".xiugai").click(function(){
		var box =300;
		var th= $(window).scrollTop()+$(window).height()/1.6-box;
		var h =document.body.clientHeight;
		var rw =$(window).width()/2-box;
		$("#showboxxiugai").animate({top:th,opacity:'show',width:585,height:350,right:rw},500);
		$("#zhezhao").css({
			display:"block",height:$(document).height()
		});
		return false;
	});
	$("#showboxxiugai .close").click(function(){
		$(this).parents("#showboxxiugai").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);
		$("#zhezhao").css("display","none");
	});
});
</script>
<!--修改框结束-->

</body>
</html>
